.dx-size-default() {
    @GENERIC_GALLERY_INDICATOR_SIZE: 8px;
    @GENERIC_GALLERY_INDICATOR_SELECTED_SIZE: 12px;
}

.dx-size-compact() {
    @GENERIC_GALLERY_INDICATOR_SIZE: 6px;
    @GENERIC_GALLERY_INDICATOR_SELECTED_SIZE: 7px;
}

.dx-gallery {
    .dx-gallery-nav-button-prev,
    .dx-gallery-nav-button-next {
        position: absolute;
        top: 0;
        width: 34%;
        height: 100%;
        background: @gallery-navbutton-degradation-bg;
        background: transparent;
        cursor: pointer;

        &.dx-state-hover:after {
            background-color: @gallery-navbutton-hover-color;
        }

        &.dx-state-active:after {
            background-color: @gallery-navbutton-active-color;
        }

        .dx-icon-font-centered-sizing(32px);

        &:after {
            content: '';
            position: absolute;
            width: 32px;
            height: 100%;
            .border-radius(@gallery-navbutton-border-radius);
        }

        &:before {
            position: absolute;
            z-index: 10;
            clear: both;
            font-size: 32px;
            color: @gallery-nav-arrow-color;
        }
    }

    .dx-gallery-nav-button-prev {
        .dx-icon-chevronleft;

         &:after {
            left: 0;
        }

        &:before {
            left: 0;
            right: auto;
            margin-left: 0;
        }
    }

    .dx-gallery-nav-button-next {
        .dx-icon-chevronright;

         &:after {
            right: 0;
        }

        &:before {
            right: 0;
            left: auto;
        }
    }
}


.dx-gallery-indicator {
    pointer-events: none;
    text-align: center;
}

.dx-gallery-indicator-item {
    .border-radius(50%);
    .box-sizing(border-box);
    border: 1px solid @gallery-indicator-item-border-color;
    pointer-events: auto;

    margin: 5px - @GENERIC_GALLERY_INDICATOR_SIZE/2 6px;
    width: @GENERIC_GALLERY_INDICATOR_SIZE;
    height: @GENERIC_GALLERY_INDICATOR_SIZE;
    background: @gallery-indicator-bg;
}

.dx-gallery-indicator-item-active,
.dx-gallery-indicator-item-selected {
    width: @GENERIC_GALLERY_INDICATOR_SELECTED_SIZE;
    height: @GENERIC_GALLERY_INDICATOR_SELECTED_SIZE;
    background: @gallery-indicator-item-selected-bg;
    border: 2px solid @gallery-indicator-selected-border-color;
    margin: 5px - @GENERIC_GALLERY_INDICATOR_SELECTED_SIZE/2 6px;
}



.dx-state-focused.dx-gallery {
    .dx-gallery-indicator-item-selected {
         background: @gallery-indicator-focused-bg;
    }
}
